<template>
  <div>
    <h-form ref="formDynamic" :model="formDynamic" :label-width="80">
      <h-form-item
        v-for="(item, index) in formDynamic.bankCards"
        :key="index"
        :label="'银行卡' + (index + 1)"
        :prop="'bankCard.' + index + '.value'"
        :rules="{
          required: true,
          message: '银行卡' + (index + 1) + '不能为空',
          trigger: 'blur',
        }"
      class="animate__animated animate__fadeInRight card">
        <h-row>
          <h-col span="4" offset="1">
            <h-select v-model="item.type" style="width: 20vh">
              <h-option
                v-for="item in typeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}
              </h-option>
            </h-select>
          </h-col>

          <h-col span="14">
            <h-input
              type="text"
              v-model="item.num"
              placeholder="请输入16至19位的银行卡号"
              @on-blur="checkBankCard(item.num)"
              style="margin-top: 0vh"
            ></h-input>
          </h-col>

          <h-col span="4" offset="1">
            <h-button type="ghost" @click="handleRemove(index)">删除</h-button>
          </h-col>
        </h-row>
      </h-form-item>
      <h-form-item>
        <h-row>
          <h-col span="14" offset="5">
            <h-button type="dashed" long @click="handleAdd" icon="plus-round"
              >新增</h-button
            >
          </h-col>
        </h-row>
      </h-form-item>
      <h-form-item>
        <h-col span="24" class="button-container">
          <h-button type="primary" @click="next">下一步</h-button>
          <h-button type="primary" @click="pre" style="margin-left: 2vh"
            >上一步</h-button
          >
          <h-button
            type="ghost"
            @click="handleReset('formDynamic')"
            style="margin-left: 8px"
            >重置</h-button
          >
        </h-col>
      </h-form-item>
    </h-form>
  </div>
</template>
<script>
import { validateBankCardNumber } from "@/utils/validate";
export default {
  data() {
    return {
      typeList: [
        { value: "中国银行", label: "中国银行" },
        { value: "工商银行", label: "工商银行" },
        { value: "建设银行", label: "建设银行" },
        { value: "农业银行", label: "农业银行" },
        { value: "招商银行", label: "招商银行" },
        { value: "test", label: "test" },
        { value: "测试银行1", label: "测试银行1" },
      ],
      identity_card_id: "",
      identity_card_type: "",
      name: "",
      formDynamic: {
        bankCards: [
          {
            type: "",
            num: "",
          },
        ],
      },
      bankCards: [],
    };
  },
  mounted() {
    //取出数据
    this.formDynamic.bankCards = this.$store.getters["user/bankCards"];
    this.bankCards = this.$store.getters["user/bankCards"];
    this.identity_card_type =
      this.$store.getters["user/userInfo"].identity_card_type;
    this.identity_card_id =
      this.$store.getters["user/userInfo"].identity_card_id;
    this.name = this.$store.getters["user/userInfo"].name;
  },
  beforeDestroy() {
    //保存数据
    this.$store.commit("user/setBankCards", this.formDynamic.bankCards);
  },
  methods: {
    check() {
      if (this.bankCards === undefined || this.bankCards.length === 0) {
        this.$hMessage.error("请填写银行卡信息");
        return false;
      }
      for (let i = 0; i < this.bankCards.length; i++) {
        if (
          this.bankCards[i].type === undefined ||
          this.bankCards[i].type === "" ||
          this.bankCards[i].num === undefined ||
          this.bankCards[i].num === ""
        ) {
          this.$hMessage.error("请填写完整银行卡信息");
          return false;
        }
      }
      let hasInvalidCard = this.bankCards.some((item, index) => {
        if (!validateBankCardNumber(item.num)) {
          this.$hMessage.error("银行卡号" + (index + 1) + "格式错误");
          return true;
        }
      });
      if (hasInvalidCard) {
        return false;
      }
      return true;
    },
    next() {
      if (this.check()) {
        this.$store.commit("user/setBankCards", this.bankCards);
        //跳转到下一个组件
        this.$store.commit("components/incrementCurrentRegister");
      }
    },
    pre() {
      //跳转到上一个组件
      this.$store.commit("components/decrementCurrentRegister");
    },

    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$hMessage.success("提交成功!");
        } else {
          this.$hMessage.error("表单验证失败!");
        }
      });
    },
    handleReset(name) {
      console.log(this.formDynamic.bankCards);
      this.$refs[name].resetFields();
    },
    handleAdd() {
      this.formDynamic.bankCards.push({
        value: "",
      });
    },
    handleRemove(index) {
      if (this.formDynamic.bankCards.length === 1) {
        this.$hMessage.warning("至少保留一个银行卡");
        return;
      }
      this.formDynamic.bankCards.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>